<template>
	<view>
		<view class="page">
			<view class="flex benben-position-layout flex flex-wrap align-center flex_0"
				:style="{height:(88+StatusBarRpx)+'rpx',paddingTop:StatusBarRpx+'rpx', }">
				<view class='flex flex-wrap align-center justify-between flex-sub fd0_0'>
					<view class='flex flex-wrap align-center fd0_0_c0' @tap.stop="handleJumpDiy" data-type="back"
						data-url="1">
						<text class='fu-iconfont2  fd0_0_c0_c0'>&#xE794;</text>
					</view>
					<view class='flex flex-wrap align-stretch justify-center'>
						<text class='fd0_0_c1_c0'>消防监督</text>
					</view>
					<view class='flex flex-wrap align-center justify-end fd0_0_c0'>
					</view>
				</view>
			</view>
			<view :style="{height: (88+StatusBarRpx)+'rpx'}"></view>
			<!---flex布局flex布局开始-->
			<view class="flex benben-flex-layout flex-wrap align-center flex_1">
				<view class='flex flex-wrap align-center fd1_0'>
					<view class='flex flex-wrap align-center justify-between fd1_0_c0'>
						<view class='flex flex-wrap align-center'>
							<text class='fd1_0_c0_c0_c0'>监督定位</text>
						</view>
						<view class='flex flex-wrap align-center'><!-- 河南省郑州市二七区 -->
							<text class='fd1_0_c0_c1_c0'>{{region}}</text>
							<image class='fd1_0_c0_c1_c1' mode="aspectFit" :src='STATIC_URL+"56.png"'></image>
						</view>
					</view>
					<view class='flex flex-wrap align-center fd1_0_c1'>
						<view class='flex flex-wrap fd1_0_c1_c0'>
							<benben-textarea class='flex input_fd1_0_c1_c0' :placeholder="'请输入详细位置'"
								:adjust-position='true' :maxlength="240" :show-num='true'
								placeholder-style="color:#999;font-size:28rpx" v-model="detailed_address" />
							<template>
								<view class='flex flex justify-end numberfd1_0_c1_c0_c0'>
									<text>{{detailed_address.length}}</text>
									<text>/</text>
									<text>240</text>
								</view>
							</template>
						</view>
					</view>
					<view class='flex flex-wrap align-center justify-between fd1_0_c1'
						@tap.stop="pickerDiy165698fangwuleixing5489961 = true">
						<text class='fd1_0_c0_c0_c0'>房屋类型</text>
						<view class='flex flex-wrap align-center'>
							<text class='fd1_0_c2_c1_c0'>{{fangwuleixingLabel?fangwuleixingLabel:'请选择'}}</text>
							<image class='fd1_0_c2_c1_c1' mode="aspectFit" :src='STATIC_URL+"212.png"'></image>
						</view>
					</view>
					<view class='flex flex-wrap align-center fd1_0_c1'>
						<text class='fd1_0_c3_c0'>存在隐患</text>
						<view class='flex flex-wrap fd1_0_c3_c1'>
							<benben-textarea class='flex input_fd1_0_c1_c0' :placeholder="'请输入'" :adjust-position='true'
								:maxlength="240" :show-num='true' placeholder-style="color:#999;font-size:28rpx"
								v-model="there_are_hidden_dangers" />
							<template>
								<view class='flex flex justify-end numberfd1_0_c1_c0_c0'>
									<text>{{there_are_hidden_dangers.length}}</text>
									<text>/</text>
									<text>240</text>
								</view>
							</template>
						</view>
					</view>
					<view class='flex flex-wrap align-center justify-between fd1_0_c4'>
						<view class='flex flex-wrap align-center'>
							<text class='fd1_0_c4_c0_c0'>现场取证</text>
							<text class='fd1_0_c4_c0_c1'>请上传带有拍摄时间的照片</text>
						</view>
						<view class='flex flex-wrap align-center'>
							<text class='fd1_0_c4_c1_c0'>上传照片</text>
						</view>
					</view>
					<view class='flex flex-wrap align-center fd1_0_c5'>
						<benben-images-upload ref="benbenImagesUploadfd1_0_c5_c0"
							:img-list.sync="evidence_collection_records" :img-ids.sync="img_id" :is-show-tips='true'
							:maxlength="6">
							<template #content="{ num, maxlength, isShow,imgList}">
								<view class="flex flex-wrap align-start flex fd1_0_c5_c0">
									<view v-for="(image, index) in imgList" :key="index"
										class='flex position-relative fd1_0_c5_c00'>
										<text class='fu-iconfont2 position-absolute fd1_0_c5_c000'
											@tap.stop="$refs.benbenImagesUploadfd1_0_c5_c0.delImage(index)">&#xE8E7;</text>
										<image class='fd1_0_c5_c001'
											@tap.stop="$refs.benbenImagesUploadfd1_0_c5_c0.previewImage(index)"
											mode="aspectFill" :src='image'></image>
									</view>
									<image class='fd1_0_c5_c01'
										@tap.stop="$refs.benbenImagesUploadfd1_0_c5_c0.manyChooseImage()" v-if="isShow"
										mode="aspectFill" :src='STATIC_URL+"111.png"'></image>
								</view>
							</template>
						</benben-images-upload>
					</view>
				</view>
				<view class='flex flex-wrap align-center fd1_1' @tap.stop="chehuiSubmit" v-if="aid">
					<view class='flex flex-wrap align-center justify-center fd1_1_c0'>
						<text class='fd1_1_c0_c0'>撤回监督</text>
					</view>
				</view>
				<view class='flex flex-wrap align-center fd1_1' @tap.stop="tijiaoSubmit" v-else>
					<view class='flex flex-wrap align-center justify-center fd1_1_c0'>
						<text class='fd1_1_c0_c0'>提交</text>
					</view>
				</view>
			</view>
			<!---flex布局flex布局结束-->
		</view>

		<!--选择房屋类型开始 -->
		<benben-picker ref="benbenWritePickerCodepicker2" :visible.sync="pickerDiy165698fangwuleixing5489961"
			:label.sync='fangwuleixingLabel' :value.sync='house_id' :options='fangwuleixingOptions' mode='selector'
			:mask-show='true' :timeout='true' :picker-height='88' default-type='aid'
			:default-props='{"label":"name","value":"aid"}'>
			<template #picker-header>
				<view class='flex flex-wrap align-center justify-between myInfo_picker2_0'>
					<text class='myInfo_picker2_0_c0' @tap="$refs.benbenWritePickerCodepicker2.cancel()">取消</text>
					<text class='myInfo_picker2_0_c1'>房屋类型</text>
					<text class='myInfo_picker2_0_c2'
						@tap="$refs.benbenWritePickerCodepicker2.pickerConfirm()">完成</text>
				</view>
			</template>
		</benben-picker>
		<!--选择房屋类型结束 -->

	</view>
</template>
<script>
	export default {
		components: {},
		data() {
			return {
				"fd1_0_c1_c0": "",
				"fd1_0_c3_c1": "",
				houseList: [],
				region: '河南省郑州市二七区',
				detailed_address: '',
				there_are_hidden_dangers: '',
				evidence_collection_records: [],
				img_id: '',
				house_id: '',
				fangwuleixingLabel: '',
				fangwuleixingOptions: [],
				pickerDiy165698fangwuleixing5489961: false,
				aid:'',
			};
		},
		computed: {
			user_id() {
				return this.$store.state.userInfo.id
			}
		},
		watch: {},
		onLoad(options) {
			let {
				aid
			} = options
			if (aid) {
				this.aid = aid
				this.detailsInfo()
			}else{
				this.region = uni.getStorageSync('addressDistrict')
			}
			this.getFangWuType()
		},
		onUnload() {

		},
		onReady() {

		},
		onShow() {

		},
		onHide() {

		},
		onResize() {

		},
		onPullDownRefresh() {

		},
		onReachBottom(e) {

		},
		onPageScroll(e) {

		},
		methods: {
			chehuiSubmit() {
				let that = this
				uni.showModal({
					title: '提示：',
					content: '请确认是否撤回监督?',
					success: function(res) {
						if (res.confirm) {
							that.$api.post('/m6752/66fa77c28f623',{
								aid	:that.aid,
								state:2
							}).then(res=>{
								if(res.data.code == 1){
									that.$message.info('撤销成功')
									setTimeout(()=>{
										uni.navigateBack(1)
									},600)
								}
							})
						} else if (res.cancel) {
							console.log('取消');
							//TODO
						}
					}
				});
			},
			detailsInfo() {
				this.$api.post('/m6752/66fa65a558092', {
					aid: this.aid
				}).then(res => {
					if (res.data.code == 1) {
						let infoVal = res.data.data
						this.region = infoVal.region
						this.detailed_address = infoVal.detailed_address
						this.there_are_hidden_dangers = infoVal.there_are_hidden_dangers
						this.evidence_collection_records = infoVal.evidence_collection_records
						this.fangwuleixingOptions.forEach((item,index)=>{
							if(item.aid == infoVal.house_id){
								console.log(item.name);
								this.fangwuleixingLabel = item.name
							}
						})
					}
				})
			},
			tijiaoSubmit() {
				let arr = {
					region: this.region?this.region:'南京市雨花区农花路',
					detailed_address: this.detailed_address,
					there_are_hidden_dangers: this.there_are_hidden_dangers,
					evidence_collection_records: JSON.stringify(this.evidence_collection_records),
					house_id: this.house_id,
					user_id: this.user_id
				}
				this.$api.post('/m6752/66fa7756af3c4', arr).then(res => {
					if (res.data.code == 1) {
						this.$message.info('提交成功')
						setTimeout(() => {
							uni.navigateBack(1)
						}, 500)
					} else {
						this.$message.info(res.data.msg)
					}
				})
			},
			getFangWuType() {
				this.$api.post('/m6752/66f9046a00f6a').then(res => {
					if (res.data.code == 1) {
						this.fangwuleixingOptions = res.data.data
					}
				})
			},
		}
	};
</script>
<style lang="scss" scoped>
	.page {
		width: 100vw;
		overflow-x: hidden;
		min-height: calc(100vh - var(--window-bottom));
		background: #F8F8F8;
		background-size: 100% auto;
	}

	.myInfo_picker2_0_c2 {
		color: #FC5F80;
		line-height: 40rpx;
		font-size: 32rpx;
		font-weight: 500;
	}

	.myInfo_picker2_0_c1 {
		font-size: 36rpx;
		font-weight: 500;
		color: #333333;
	}

	.myInfo_picker2_0_c0 {
		line-height: 40rpx;
		font-size: 32rpx;
		font-weight: 500;
		color: #BFBFBF;
	}

	.myInfo_picker2_0 {
		border-bottom: 1px solid #eee;
		background: #fff;
		padding: 0rpx 32rpx 0rpx 32rpx;
		line-height: 88rpx;
		border-radius: 25rpx 25rpx 0rpx 0rpx;
		background-size: 100% auto !important;
	}

	.flex_0 {
		background: #fff;
		width: 750rpx;
		height: 88rpx;
		overflow: hidden;
		z-index: 10;
		top: 0rpx;
		background-size: 100% auto !important;
	}

	.fd0_0_c1_c0 {
		font-size: 36rpx;
		font-weight: 500;
		color: #333333;
		line-height: 50rpx;
	}

	.fd0_0_c0_c0 {
		font-size: 36rpx;
		color: #333;
	}

	.fd0_0_c0 {
		width: 120rpx;
	}

	.fd0_0 {
		padding: 0rpx 32rpx 0rpx 32rpx;
	}

	.flex_1 {
		padding: 24rpx 24rpx 0rpx 24rpx;
	}

	.fd1_1_c0_c0 {
		color: #FFFFFF;
		font-size: 32rpx;
		font-weight: 500;
	}

	.fd1_1_c0 {
		background: #FC5F80;
		width: 100%;
		border-radius: 60rpx 60rpx 60rpx 60rpx;
		height: 88rpx;
	}

	.fd1_1 {
		width: 100%;
		padding: 0rpx 32rpx 0rpx 32rpx;
		margin: 32rpx 0rpx 32rpx 0rpx;
	}

	.fd1_0_c5_c02 {
		font-size: 32rpx;
		color: #d5d5d5;
	}

	.fd1_0_c5_c01 {
		width: 200rpx;
		height: 200rpx;
		margin: 0rpx 24rpx 24rpx 0rpx;
	}

	.fd1_0_c5_c001 {
		width: 200rpx;
		height: 200rpx;
	}

	.fd1_0_c5_c000 {
		top: 0rpx;
		right: 0rpx;
		z-index: 10;
		color: #ff5536;
	}

	.fd1_0_c5_c00 {
		margin: 0rpx 24rpx 24rpx 0rpx;
	}

	.fd1_0_c5_c0 {
		width: 750rpx;
		padding: 24rpx 0rpx 0rpx 24rpx;
	}

	.fd1_0_c5 {
		margin: 12rpx 0rpx 0rpx 0rpx;
		width: 100%;
	}

	.fd1_0_c4_c1_c0 {
		color: #FF7934;
		font-size: 24rpx;
		font-weight: 400;
	}

	.fd1_0_c4_c0_c1 {
		color: #999999;
		font-size: 24rpx;
		font-weight: 400;
	}

	.fd1_0_c4_c0_c0 {
		color: #333333;
		font-size: 32rpx;
		font-weight: 400;
		margin: 0rpx 16rpx 0rpx 0rpx;
	}

	.fd1_0_c4 {
		width: 100%;
		margin: 32rpx 0rpx 0rpx 0rpx;
	}

	.fd1_0_c3_c1 {
		background: rgba(248, 248, 248, 1);
		width: 650rpx;
		border-radius: 10rpx 10rpx 10rpx 10rpx;
		padding: 24rpx;
		margin: 24rpx 0rpx 0rpx 0rpx;
	}

	.fd1_0_c3_c0 {
		width: 100%;
		color: #333333;
		font-size: 32rpx;
		font-weight: 400;
	}

	.fd1_0_c2_c1_c1 {
		width: 10rpx;
		height: 20rpx;
		border-radius: 0rpx 0rpx 0rpx 0rpx;
		margin: 0rpx 0rpx 0rpx 24rpx;
	}

	.fd1_0_c2_c1_c0 {
		color: #999999;
		font-size: 32rpx;
		font-weight: 400;
	}

	.numberfd1_0_c1_c0_c0 {
		width: 100%;
		font-size: 24rpx;
		color: #FFFFFF;
		line-height: 46rpx;
		font-weight: 400;
	}

	.input_fd1_0_c1_c0 {
		width: 100%;
		height: 140rpx;
		font-size: 28rpx;
		font-weight: 400;
		color: #333;
		white-space: pre-wrap;
	}

	.fd1_0_c1_c0 {
		background: rgba(248, 248, 248, 1);
		width: 650rpx;
		border-radius: 10rpx 10rpx 10rpx 10rpx;
		padding: 24rpx;
	}

	.fd1_0_c1 {
		border-bottom: 1px solid #eee;
		width: 100%;
		margin: 32rpx 0rpx 0rpx 0rpx;
		padding: 0rpx 0rpx 32rpx 0rpx;
	}

	.fd1_0_c0_c1_c1 {
		width: 28rpx;
		height: 28rpx;
		border-radius: 0rpx 0rpx 0rpx 0rpx;
	}

	.fd1_0_c0_c1_c0 {
		color: #666666;
		font-size: 32rpx;
		font-weight: 400;
		margin: 0rpx 16rpx 0rpx 0rpx;
	}

	.fd1_0_c0_c0_c0 {
		color: #333333;
		font-size: 32rpx;
		font-weight: 400;
	}

	.fd1_0_c0 {
		border-bottom: 1px solid #eee;
		width: 100%;
		padding: 0rpx 0rpx 32rpx 0rpx;
	}

	.fd1_0 {
		background: #FFFFFF;
		width: 100%;
		border-radius: 16rpx 16rpx 16rpx 16rpx;
		padding: 32rpx 24rpx 32rpx 24rpx;
	}
</style>